<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        .comA,.comB,.comC{
            padding: 5px;
            border:1px solid #333;
            margin: 5px;
        }
    </style>
</head>
<body>
    <div id="app">
        <comp-a></comp-a>
        <comp-b></comp-b>
        <comp-c></comp-c>
    </div>
</body>
<script>
    // 需求:将多个组件中的某一个功能单独提取出来 => 提取成公共的 => 多个组件都可以使用(代码服用)

    // 混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

    // 混入过程中 如果出现同名 属性 方法 计算属性  生命周期钩子函数  => 如何处理?  => 当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”。
    // 1. data methods、components 和 directives   => 以组件自身为主
    // 2. 生命周期钩子函数将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。
    

    // 全局混入   => 所有的vue组件都会新增此功能 (不建议使用  -> 一般情况下哪个组件需要那个组件混入)
    // 局部混入   => 哪个组件需要,就在组件选项中配置 mixins:[]  可以传入多个局部混入对象

    var mixin1 = {
        data(){
            return {
                a:1,
            }
        },
        methods:{
            addA(){
                this.a ++;
            }
        },
        mounted() {
            console.log("组件挂载完毕a:",this.a);
        },
    }

    var compA = {
        mixins:[mixin1],
        data(){
            return {
            }
        },
        template:`<div class="comA">
            <p>这是组件A:{{a}}</p>
            <p>
                <button @click="addA">a++</button>
            </p>
        </div>`,
        methods:{
           
        },
    }

    var compB = {
        mixins:[mixin1],
        data(){
            return {
                a:10,
            }
        },
        template:`<div class="comB">
            <p>这是组件B:{{a}}</p>
            <p>
                <button @click="addA">a++</button>
            </p>
        </div>`,
        methods:{
            addA(){
                this.a +=10;
            }
        },
    }

    var compC = {
        mixins:[mixin1],
        data(){
            return {
                a:1,
            }
        },
        template:`<div class="comC">
            <p>这是组件C:{{a}}</p>
            <p>
                <button @click="addA">a++</button>
            </p>
        </div>`,
        methods:{
            addA(){
                this.a ++;
            }
        },
        mounted() {
            console.log("组件挂载完毕C");
        },
    }

    var vm = new Vue({
        el:"#app",
        data:{},
        components:{
            compA,
            compB,
            compC,
        }
    })



</script>
</html>